Repository navigation
style(onboarding): Add layered agent setup treatment - #130814
sentry-junior[bot] wants to merge 7 commits into
Conversation
Co-Authored-By: Evan Purkhiser <evan.purkhiser@sentry.io>
Story previewsPreview the stories changed in this PR on the Vercel deployment:
Preview deployment: https://sentry-l7fc1lkwo.sentry.dev |
github-actions
Bot
added
the
Scope: Frontend
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 17bf080. Configure here.
The unframed progress list paints an opaque, square background flush to the surface edges, which covered the layered card's rounded corners once the agent connected.
Keep the agent progress, completion, and failure views identical to the default appearance. The layered frame now wraps only the setup card, and the larger heading and narrower layout apply only before the agent connects. Co-Authored-By: Evan Purkhiser <evan.purkhiser@sentry.io>
Update the welcome copy and heading size, restore the 520px step width, and restyle the setup card text, checklist copy, and spacing to match the design. Give the layered card an accent border and stacked drop shadows with dark-mode variants, keeping its slight tilt. Swap the "or" separator and manual setup card for a full-width text button on the agent setup landing. Restyle the agent prompt as a debossed box with an accent text selection, drop the focus ring shown on programmatic focus, and add an external-link icon to the instructions link. Reset the global list margin that added extra space above the prompt.
# Conflicts: # static/app/components/agentHandoff/agentHandoffPrompt.tsx
evanpurkhiser
left a comment
evanpurkhiser
left a comment
There was a problem hiding this comment.
I think we can simplify this a bit so the create project verison basically looks the same. the only difference being that it's not tilted and does not have the drop shadow stuff
Project creation now renders the same setup card, copy, spacing, and manual setup link as the onboarding landing. The layered appearance only adds the tilt and stacked drop shadow on top of the shared frame. Use the new welcome copy and spacing everywhere instead of branching.
evanpurkhiser
left a comment
evanpurkhiser
left a comment
There was a problem hiding this comment.
Please apply the design-system cleanup from this review: collapse SetupCardFrame to one rendered DOM surface, keep the Container render prop to transfer layout props to that surface, move the layered rotation into LayeredSurface instead of using the deprecated style prop, and remove the unused position="relative". Replace the appearance enum with a layered boolean so only the tilt and layered border/shadows vary. Replace the styled AccentText span with Text variant="accent", remove bold={false}, and remove the no-op outer Stack and single-child Stack in AgentSetupCard. Keep the render-prop Container around the full-width manual setup Button and keep its inner Flex for text/chevron spacing. The create-project host should use the same framed card without the tilt or layered shadows.
Merge origin/master, keeping both sides in agentHandoffPrompt.tsx (prompt box styling plus the new handoff-code wording) and agenticSetup.tsx (the shared setup card frame plus the handoffFlow prop). Per review: SetupCardFrame renders a single surface that carries the layered tilt, border, and shadows; AgenticSetup takes a layered boolean; the manual setup link uses Text variant="accent"; and AgentSetupCard drops its no-op wrapper Stacks.
The agent setup path should feel more distinct and focused than the general product welcome while preserving the shared setup behavior used by project creation.
This adds an onboarding-only layered presentation for the agent setup landing state: the “Ship happens.” heading, larger type, a narrower layout, subtle card rotation, and stacked color accents. Once the agent connects, the progress, completion, and failure views render exactly as they do today. The shared setup and progress components keep their default appearance for other consumers such as project creation.
Replaces #130812, which was accidentally stacked on #130795. This is rebased onto
masterwithout the start-over (onStartOver) wiring from #130795, so the two PRs can land independently in either order.via evan.purkhiser.
--
View Session [Sentry]